<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <!-- 失去焦点事件   @blur   @focus 获取焦点事件-->
    <input type="text" @blur="inpBlur" v-model="userName">

    <span v-show="visible">该用户名已经被使用，请换一个名称</span>
</div>

<script src="../20211018/vue.js"></script>
<script>
    let myApp = new Vue({
        el: '#app',
        data: {
            nameList: ['admin', 'tom', 'bob'],
            userName: '',
            visible: false
        },
        methods: {
            inpBlur () {
                console.log('input失去焦点了')
                console.log(this.userName);
                // includes
                // some
                // every

                let result = this.nameList.some(item => {
                    return item === this.userName
                })

                // for (let i = 0; i < this.nameList.length; i++) {
                //     if (this.userName === this.nameList[i]) {
                //         result = true
                //     }
                // }

                if (result) {
                    this.visible = true
                } else {
                    this.visible = false
                }
                console.log(result)
            }
        }
    })
</script>
</body>
</html>